import React, { Component } from 'react';
// 书写组件
class Durian extends Component{
    // 属性
    state={
        count:0
    }
    //计算总价函数方法
    handleCount =()=>{
        // 更改值
        this.setState({
            // 直接拿值乘以数量
            count:this.props.price*5
        })
    }
    //更改单价的值
    updata =()=>{
        this.props.updatePrice(15)
    }
    //书写页面值
    render(){
        return(
            <>
                <h1>子组件之榴莲的儿子</h1>
                {/* 这里的值来自于榴莲树 */}
                <div>单个榴莲的价格是：{this.props.price}元一个</div>
                <div>
                    <h3>商场大通知，通知！</h3>
                    <p>因为榴莲最近销售火爆经本商场高层会议，做出如下通告，对本商场的榴莲价格进行上升，具体上升为15元一个单价</p>
                    <div>柏柏商场榴莲最新价格：{this.props.price}元一个</div>
                    <div>
                        按最新价格计算，5个榴莲共计：{this.state.count}元 
                    <button onClick={this.updata }>统一修改榴莲为15元一个</button>
                    <button onClick={this.handleCount}>一键统计</button>
                    </div>
                </div>
            </>
        )
    }
}

export default Durian